<!-- Required Parameters: -->
<!--    dynamicPropertyName: the name of the field representing the dynamic form -->
<div class="dynamic-form-container" 
    th:with="df=${entityForm.dynamicForms['__${dynamicPropertyName}__']}"
    th:attr="data-dynamicpropertyname=${dynamicPropertyName},
             data-currenturl=@{${'/' + sectionKey + '/' + dynamicPropertyName + '/dynamicForm'}}">

    <img th:src="@{/img/admin/ajax-loader.gif}" class="ajax-loader" />
    
    <th:block th:unless="${#sets.isEmpty(df.tabs)}">
        <div th:each="group : ${df.tabs[0].fieldGroups}"
            th:classappend="${!group.isVisible}? 'hidden'" class="fieldset-card field-group dynamic-form">
            <a class="titlebar" href="#">
                <div class="titlebar-title">
                    <span th:utext="#{${group.title}}"></span>
                    <i class="fa fa-question-circle help-tip" th:unless="${#strings.isEmpty(group.toolTip)}" th:attr="data-tip=#{${group.toolTip}}"></i>
                </div>

                <div class="collapser">
                    <span class="collapsed" href="#" th:if="${group.collapsed}" th:inline="text">([[#{form.show}]])</span>
                    <span class="expanded" href="#" th:unless="${group.collapsed}" th:inline="text">([[#{form.hide}]])</span>
                </div>
            </a>
            <div class="fieldset-card-content" th:classappend="${(group.collapsed ? 'content-collapsed' : '')}">

                <th:block  th:each="groupItem, groupItemStat : ${group.groupItems}">
                    <th:block th:if="${groupItem.isField()}" th:with="field=${groupItem.field}">
                        <div th:if="${field.name}"
                             th:class="${'field-group' + (field.isDirty ? ' dirty' : '') + (field.disabled ? ' disabled' : '')}"
                             blc_admin:component_id="${field}"
                             th:classappend="${!field.isVisible}? 'hidden'">

                             <div th:if="${renderOriginalValue}"
                                  class="original-value"
                                  th:attr="data-original-value=${field.attributes['originalValue']},
                                           data-original-overriden-value=${field.attributes['originalOverridenValue']}" ></div>

                            <th:block th:if="${field.fieldComponentRenderer == null or #strings.equals(field.fieldComponentRenderer, 'UNKNOWN')}">
                                <div th:replace="${'fields/' + #strings.toLowerCase(field.fieldType)}"></div>
                            </th:block>
                            <th:block th:unless="${field.fieldComponentRenderer == null or #strings.equals(field.fieldComponentRenderer, 'UNKNOWN')}">
                                <div th:replace="${'fields/' + #strings.toLowerCase(field.fieldComponentRenderer)}"></div>
                            </th:block>

                            <span th:if="${field.help}" class="field-help" th:utext="#{${field.help}}" ></span>
                        </div>
                    </th:block>
                </th:block>

                <th:block th:unless="${#strings.containsIgnoreCase(group.title, 'master')}">
                    <th:block th:if="${dynamicFormActionsTemplate}">
                        <div th:replace="${dynamicFormActionsTemplate}" ></div>
                    </th:block>
                </th:block>
            </div>
        </div>
    </th:block>
    
</div>
